<template>
  <div>

      <a-input placeholder="请输入名字" class="my_ipt" 
     :value='inputValue'
     @change="handleInput"
    style="width:300px;margin-right:10px;margin:40px 20px 10px 100px"></a-input>
    <a-button type="primary" @click="btnHandle">添加名字</a-button>

        <a-input placeholder="请输入年龄" class="my_ipt" 
     :value='inputValue1'
     @change="handleInput1"
    style="width:300px;margin-right:10px;margin:40px 40px 10px"></a-input>
    <a-button type="primary" @click="btnHandle">添加年龄</a-button>

    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>国籍</th>
          <th>头衔</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,i) in list" :key='item.id'>
          <td>{{i+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.nation}}</td>
          <td>{{item.position}}</td>
          <td>
             <a slot="actions" @click="removeID(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>



export default {
data() {
  return {
    list:[
      {id:1,name:"张三",age:21,nation:"中国",position:"大学生"},
      {id:2,name:"李斯",age:22,nation:"中国",position:"大学生"},
      {id:3,name:"王五",age:24,nation:"中国",position:"大学生"},
      {id:4,name:"老刘",age:23,nation:"中国",position:"大学生"},
    ],
    inputValue:'',
     inputValue1:'',
    nextId:5,
  }
},

methods:{
  handleInput(e){
       console.log(e.target.value)
      //  this.$store.commit('setInput',e.target.value)
       this.inputValue=e.target.value
   
     },
      handleInput1(e){
       console.log(e.target.value)
      //  this.$store.commit('setInput',e.target.value)
       this.inputValue1=e.target.value
   
     },

      btnHandle(){
       if(this.inputValue.trim().length>0&&this.inputValue1.trim().length>0){
            this.list.push({
           id:this.nextId,
          name:this.inputValue,
          age:this.inputValue1,
          nation:"中国",
         position:"大学生"
         })
        this.nextId++;
        this.inputValue=''
        this.inputValue1=''
        }
       else{
          // alert('文本框内容不能为空！')
          this.$notify({
          title: '警告',
          message: '文本框内容不能为空！',
          type: 'warning'
        });
        
       
       }
      //  this.$store.commit('addItem')
     },

    
      removeID(id){
     const i=this.list.findIndex(x=>x.id===id)
      // 根据索引，删除对应的元素
      if(i !==-1){ //索引存在
        this.list.splice(i,1)
      }
     },
}
}
</script>

<style lang="less" scoped>
table{
  margin: 30px 40px;
}
th,td{
    border: 1px solid #333;
    width:200px;
    height: 60px;
    padding:0  20px;
    
    text-align: center;
  }


</style>